<script lang="ts" setup>
import { reactive, ref, watch, onMounted } from "vue"
import { ElMessage, ElMessageBox, type FormInstance } from "element-plus"
import { Search, Refresh, RefreshRight, Tickets, Download, DocumentCopy } from "@element-plus/icons-vue"
import { usePagination } from "@/hooks/usePagination"
import ImageUploader from "./components/ImageUploader.vue"
import {
  getBillInventorListApi as getBillListApi,
  getBillInventorCountApi as getCountApi,
  doDeleteApi,
  billListCurrentApi,
  getBillInventorExportApi as getBillExportApi,
  deleteByIdApi
} from "@/api/billv2"
import drawer from "./components/drawer.vue"
import excrete from "./components/excrete.vue"
import splits from "./components/splits.vue"
import batch from "./components/batch.vue"
import UploadDialog from "./components/UploadDialog.vue"
import Create from "./components/create.vue"
import AllList from "./components/allList.vue"
import billTransfer from "./components/billTransfer.vue"
import ImageRecognitionUploaderSell from "./components/ImageRecognitionUploaderSell.vue"
import { frontExport, sumValuesForName, copyToClipboard } from "@/utils/common"
import { getAdminRoleListApi } from "@/api/system"
import Decimal from "decimal.js"
import clipboard3 from "vue-clipboard3"
import face from "@/views/bill/components/face/index.vue"
import splitshistory from "./components/splitshistory.vue"
import { dictDataGetListApi } from "@/api/conventional"

defineOptions({
  // 命名当前组件
  name: "ElementPlus"
})
const contentToCopy = ref<HTMLDivElement | null>(null)
onMounted(() => {
  billListCurrent()
})
const faceRef = ref<any>(null)
const splitshistoryRef = ref<any>(null)
const imageRecognitionUploaderSellRef = ref<any>(null)
const currentList = ref<any>([])
const currentString = ref<any>(JSON)
const billListCurrent = () => {
  console.log("currentList")
  billListCurrentApi({}).then((res: any) => {
    currentList.value = res.data
    currentString.value = JSON.stringify(res.data)
  })
}
const { toClipboard } = clipboard3()
const copyToClipboard2 = async () => {
  if (contentToCopy.value) {
    try {
      const textToCopy = contentToCopy.value.innerText
      await toClipboard(textToCopy)
      console.log("复制的text: ")
    } catch (error) {
      console.log("复制失败!!")
    }
  }
}

const loading = ref<boolean>(false)
const countBool = ref<boolean>(false)
const { paginationData, handleCurrentChange, handleSizeChange } = usePagination()
const drawerRef = ref<any>(null)
const excreteRef = ref<any>(null)
const splitsRef = ref<any>(null)
const batchRef = ref<any>(null)
const AllListRef = ref<any>(null)
const billTransferRef = ref<any>(null)
const UploadDialogRef = ref<any>(null)
const createRef = ref<any>(null)
//#region 增
const dialogVisible = ref<boolean>(false)
const customDateTimeFormat = ref<string>("YYYY-MM-DD HH:mm:ss")
const formRef = ref<FormInstance | null>(null)
const formData = reactive({
  billAmount: 0,
  billNo: 0,
  bill_type: 1,
  expirationDate: "",
  acceptorName: "",
  bill_back_user: ""
})

const handleCreate = () => {
  formRef.value?.validate((valid: boolean, fields) => {
    if (valid) {
      console.log("表单校验通过", fields)
    } else {
      console.error("表单校验不通过", fields)
    }
  })
}
const customDateFormat = ref<string>("YYYY-MM-DD")
const resetForm = () => {
  currentUpdateId.value = undefined
  formData.billAmount = 0
  formData.billNo = 0
  formData.bill_type = 1
  formData.expirationDate = ""
  formData.acceptorName = ""
  formData.bill_back_user = ""
}
//#endregion

//#region 改
const currentUpdateId = ref<undefined | string>(undefined)

//#endregion

//#region 查
const tableData = ref<any[]>([])
const listData = ref<any>([])
const searchFormRef = ref<FormInstance | null>(null)
const searchData = reactive({
  billNo: "",
  buttonType: "pending",
  acceptorName: "",
  bill_back_user: "",
  billAmountMin: "",
  billAmountMax: "",
  expirationDateStart: "",
  expirationDateEnd: "",
  enter_timeStart: "",
  enter_timeEnd: "",
  uid: undefined,
  company_type: undefined,
  date1: "",
  date2: "",
  invoicing_type: undefined,
  check_type: undefined
})
const options = [
  {
    value: 1,
    label: "客户"
  },
  {
    value: 2,
    label: "平台"
  },
  {
    value: 3,
    label: "中介"
  },
  {
    value: 4,
    label: "银行"
  }
]

const getAdminList = async () => {
  await getAdminRoleListApi({
    role_ids: 2
  })
    .then((res: any) => {
      listData.value = res.data
    })
    .catch(() => {})
    .finally(() => {})
}
getAdminList()
const getTableData = () => {
  loading.value = true
  getBillListApi({
    pageNum: paginationData.currentPage,
    pageSize: paginationData.pageSize,
    billNo: searchData.billNo || undefined,
    date1: searchData.date1 || undefined,
    date2: searchData.date2 || undefined,
    acceptorName: searchData.acceptorName || undefined,
    expirationDateStart: searchData.expirationDateStart || undefined,
    expirationDateEnd: searchData.expirationDateEnd || undefined,
    bill_back_user: searchData.bill_back_user || undefined,
    billAmountMin: searchData.billAmountMin || undefined,
    billAmountMax: searchData.billAmountMax || undefined,
    enter_timeStart: searchData.enter_timeStart || undefined,
    enter_timeEnd: searchData.enter_timeEnd || undefined,
    company_type: searchData.company_type || undefined,
    invoicing_type: searchData.invoicing_type || undefined,
    check_type: searchData.check_type || undefined,
    uid: searchData.uid || undefined,
    pageType: "stock",
    buttonType: searchData.buttonType || "all"
  })
    .then((res) => {
      paginationData.total = res.data.total
      tableData.value = res.data.list
      getCountData()
    })
    .catch(() => {
      tableData.value = []
    })
    .finally(() => {
      loading.value = false
    })
}
const getCountData = async () => {
  resetCountData()
  const res: any = await getCountApi({
    pageType: "stock",
    buttonType: "complete",
    billNo: searchData.billNo || undefined,
    date1: searchData.date1 || undefined,
    date2: searchData.date2 || undefined,
    acceptorName: searchData.acceptorName || undefined,
    bill_back_user: searchData.bill_back_user || undefined,
    billAmountMin: searchData.billAmountMin || undefined,
    billAmountMax: searchData.billAmountMax || undefined,
    company_type: searchData.company_type || undefined,
    invoicing_type: searchData.invoicing_type || undefined,
    check_type: searchData.check_type || undefined,
    uid: searchData.uid || undefined,
    enter_timeStart: searchData.enter_timeStart || undefined,
    enter_timeEnd: searchData.enter_timeEnd || undefined
  })
  countData.enter_count = res.data.count
  countData.enter_amount = res.data.amount
  if (res.data.complete) {
    countData.enter_complete = res.data.complete
  } else {
    countData.enter_complete = 0
  }
  if (res.data.discount) {
    countData.enter_discount = res.data.discount
  } else {
    countData.enter_discount = 0
  }
}
const handleSearch = () => {
  paginationData.currentPage === 1 ? getTableData() : (paginationData.currentPage = 1)
}
const resetSearch = () => {
  searchData.billNo = ""
  searchData.acceptorName = ""
  searchData.bill_back_user = ""
  searchData.billAmountMin = ""
  searchData.billAmountMax = ""
  searchData.expirationDateStart = ""
  searchData.expirationDateEnd = ""
  searchData.enter_timeStart = ""
  searchData.enter_timeEnd = ""
  searchData.date1 = ""
  searchData.date2 = ""
  searchData.uid = undefined
  searchData.company_type = undefined
  searchData.invoicing_type = undefined
  searchData.check_type = undefined
  searchFormRef.value?.resetFields()
  handleSearch()
}
const handBatchDialog = () => {
  if (Object.keys(lists).length === 0) {
    ElMessage.warning("请选择需要操作的票据")
    return
  }

  if (batchRef.value) {
    batchRef.value?.batchShow(lists)
  }
}
let lists = reactive({})

const handBatchDialog2 = () => {
  if (billTransferRef.value) {
    billTransferRef.value?.listShow()
  }
}
//#endregion

//#region 删
const handleDelete = (row: any) => {
  ElMessageBox.prompt("请输入删除原因", `正在删除票据：${row.billNo}，确认删除？`, {
    confirmButtonText: "确认",
    cancelButtonText: "取消"
  })
    .then(({ value }) => {
      doDeleteApi({
        inventory_id: row.inventory_id,
        reason: value
      }).then(() => {
        ElMessage.success("删除成功")
        getTableData()
      })
    })
    .catch(() => {})
}

const handleDeleteById = (row: any) => {
  ElMessageBox.confirm(`确认直接删除票据：${row.billNo}？`, "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      deleteByIdApi({
        inventory_id: row.inventory_id
      }).then(() => {
        ElMessage.success("删除成功")
        getTableData()
      })
    })
    .catch(() => {})
}
//#endregion

const selectedCountData = reactive({
  count: 0,
  amount: 0,
  complete: 0,
  discount: 0
})
const resetSelectedCountData = () => {
  selectedCountData.count = 0
  selectedCountData.amount = 0
  selectedCountData.complete = 0
  selectedCountData.discount = 0
}
const countData = reactive({
  enter_count: 0,
  enter_amount: 0,
  enter_complete: 0,
  enter_discount: 0
})
const resetCountData = () => {
  countData.enter_count = 0
  countData.enter_amount = 0
  countData.enter_complete = 0
  countData.enter_discount = 0
}

const handleSelectionChange = (val: any) => {
  if (val.length === 0) {
    resetSelectedCountData()
    countBool.value = false
  } else {
    selectedCountData.count = val.length
    selectedCountData.amount = sumValuesForName(val, "billAmount")
    selectedCountData.complete = sumValuesForName(val, "enter_finally")
    selectedCountData.complete = parseFloat(selectedCountData.complete.toFixed(2))
    selectedCountData.discount = sumValuesForName(val, "enter_discount")
    selectedCountData.discount = parseFloat(selectedCountData.discount.toFixed(2))
    countBool.value = true
  }
  selectedRows.value = val
  lists = {}
  Object.assign(lists, {}, val)
}
const selectedRows = ref<any[]>([])
const onDrawer = (row: any) => {
  console.log(row)
  if (drawerRef.value) {
    drawerRef.value.showClick(row)
  }
}
const onSplits = (row: any) => {
  if (splitsRef.value) {
    splitsRef.value.showClick(row)
  }
}
const onsplitshistory = (row: any) => {
  if (splitshistoryRef.value) {
    splitshistoryRef.value.showClick(row)
  }
}
const States = ref(false)
const closes = () => {
  States.value = !States.value
}

const handleUpload = () => {
  if (UploadDialogRef.value) {
    UploadDialogRef.value.dialogShow()
  }
}

const handleImageRecognition = () => {
  if (imageRecognitionUploaderSellRef.value) {
    imageRecognitionUploaderSellRef.value.openUploadDialog("stock")
  }
}

const handleUploadAdd = (row: any) => {
  handleCreates(row)
}

const handleCreates = (row: any) => {
  if (createRef.value) {
    createRef.value.dialogShow(row)
  }
}
const rowStyle = ({ rowIndex }: { rowIndex: number }) => {
  // 检查当前行是否在选中行中
  return selectedRows.value.includes(tableData.value[rowIndex]) ? { background: "#E6A23C !important" } : {}
}

const modality = (row: any) => {
  // if (row.columnIndex == 1) {
  //   return {
  //     color: "#2e90f7",
  //     border: "1px solid #cccccc"
  //   }
  // }
  if (row.columnIndex == 3) {
    return {
      color: "red",
      border: "1px solid #cccccc"
    }
  }
  return {
    border: "1px solid #cccccc"
  }
}

const handleInput = (event: any) => {
  event = event.replace(/，/g, ",")
  searchData.acceptorName = event.replace(/\s+/g, ",")
}

const getBillExport2 = () => {
  console.log(selectedRows.value)
  if (selectedRows.value.length === 0) {
    ElMessage.warning("请选择要导出的数据")
    return
  }
  const header = [
    "入库时间",
    "票号",
    "承兑人",
    "票面金额（万）",
    "",
    "到期日",
    "入库每十万价格",
    "入库贴息费",
    "入库实付金额",
    "",
    "背书人",
    "出库客户",
    "出库每十万价格",
    "出库贴息费",
    "出库实收金额",
    "差额",
    "出库时间",
    "入库业务员",
    "出库业务员"
  ]
  const data = selectedRows.value.map((item: any) => [
    item.enter_time,
    item.billNo,
    item.acceptorName,
    item.billAmount,
    "",
    item.expirationDate,
    new Decimal(item.enter_price || 0).div(new Decimal(1000)) + "%",
    item.enter_discount,
    item.enter_finally,
    "",
    item.bill_back_user,
    item.out_state,
    new Decimal(item.out_price || 0).div(new Decimal(1000)) + "%",
    item.out_discount,
    item.out_finally,
    item.profit,
    item.out_time,
    item.enter_nickname,
    item.out_nickname
  ])
  frontExport(data, header)
}
const getBillExport = () => {
  loading.value = true
  getBillExportApi({
    billNo: searchData.billNo || undefined,
    pageType: "stock",
    buttonType: searchData.buttonType || "all"
  })
    .then((res: any) => {
      links(res.data.filePath)
    })
    .catch(() => {})
    .finally(() => {
      loading.value = false
    })
}
const links = (filePath: string) => {
  const link = document.createElement("a") // 创建一个 a 标签用来模拟点击事件
  link.style.display = "none"
  link.href = filePath
  link.setAttribute("download", "票据管理")
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

const allLists = () => {
  if (AllListRef.value) {
    AllListRef.value.listShow()
  }
}

// #region 票面信息
const faceShow = (el: any) => {
  if (faceRef.value) {
    faceRef.value.dialogShow(el)
  }
}
// #endregion

// #region 公司类型
const invoicingList = ref<any[]>([])
const INVOICINGFun = async () => {
  const res = await dictDataGetList("COMPANY_INVOICING")
  invoicingList.value = res.data
}
const checkList = ref<any[]>([])
const checkFun = async () => {
  const res = await dictDataGetList("COMPANY_CHECK")
  checkList.value = res.data
}

const dictDataGetList = async (type: string) => {
  try {
    const res = await dictDataGetListApi({ type_code: type })
    return res
  } catch (error) {
    console.error("Error:", error)
  }
}
INVOICINGFun()
checkFun()
// #endregion

import zgbank from "@/assets/bill/bank/zgbank.png"
import zxbank from "@/assets/bill/bank/zxbank.png"
import tzbank from "@/assets/bill/bank/tzbank.png"
import nybank from "@/assets/bill/bank/nybank.png"
import ylbank from "@/assets/bill/bank/ylbank.png"
import gsbank from "@/assets/bill/bank/gsbank.png"
const imgsList: { [key: string]: string } = {
  中国银行: zgbank,
  中信银行: zxbank,
  台州银行: tzbank,
  农业银行: nybank,
  亿联银行: ylbank,
  工商银行: gsbank
}

const third_party_userList: { [key: number]: string } = {
  20001848: "郑秀",
  20001850: "欣颖",
  20001853: "杨慧"
}

const formatIds = (third_party_user_id: number) => {
  if (third_party_user_id == null) {
    return ""
  }
  const third_party_user = third_party_userList[third_party_user_id] ?? "其他"
  return third_party_user
}

// 上传成功
const handleSuccess = (response: any) => {
  // 检查返回的数据格式
  if (response.code === 200 && response.data && response.data.data && response.data.data.length > 0) {
    if (imageRecognitionUploaderSellRef.value) {
      imageRecognitionUploaderSellRef.value.openDataDialog("stock", response.data.data, response.data.company_info)
    }
  } else {
    ElMessage.success("图片上传成功")
  }
}

/** 监听分页参数的变化 */
watch([() => paginationData.currentPage, () => paginationData.pageSize], getTableData, { immediate: true })
</script>

<template>
  <div class="app-container">
    <!-- 将需要复制的内容放在一个隐藏的 DOM 元素中 -->
    <div ref="contentToCopy" style="display: none">
      <div v-for="(item, index) in currentList" :key="index">
        {{ item + "\n" }}
      </div>
    </div>

    <el-card v-loading="loading" shadow="never" class="search-wrapper">
      <el-row class="row-bg" justify="space-between">
        <el-col :span="6">
          <div class="grid-content ep-bg-purple">
            <ImageUploader upload-type="buy" @upload-success="handleSuccess" />
          </div>
        </el-col>
        <el-col :span="12">
          <el-row style="height: 100%; display: flex; align-items: center">
            <el-col :span="6">
              <div>
                <div class="title">票据总数</div>
                <div class="content">{{ countData.enter_count }}</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <div class="title">票面金额（万元）</div>
                <div class="content">{{ countData.enter_amount }}</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <div class="title">实付金额（元）</div>
                <div class="content">{{ countData.enter_complete }}</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <div class="title">贴息费（元）</div>
                <div class="content">{{ countData.enter_discount }}</div>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-divider />
      <el-form ref="searchFormRef" :inline="true" :model="searchData">
        <el-form-item label="票号">
          <el-input v-model="searchData.billNo" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="承兑人">
          <el-input v-model="searchData.acceptorName" @input="handleInput" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="背书人">
          <el-input v-model="searchData.bill_back_user" placeholder="请输入" />
        </el-form-item>

        <el-form-item label="票面金额" v-if="States">
          <el-col :span="11">
            <el-input v-model="searchData.billAmountMin" placeholder="请输入" />
          </el-col>
          <el-col :span="2" class="text-center">
            <span class="text-gray-500">-</span>
          </el-col>
          <el-col :span="11">
            <el-input v-model="searchData.billAmountMax" placeholder="请输入" />
          </el-col>
        </el-form-item>
        <el-form-item label="业务员" v-if="States">
          <el-select v-model="searchData.uid" placeholder="请选择" clearable>
            <el-option v-for="item in listData" :key="item.id" :label="item.nickname" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="客户类别" v-if="States">
          <el-select v-model="searchData.company_type" placeholder="请选择" clearable>
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="入库时间" v-if="States">
          <el-col :span="11">
            <el-date-picker
              :format="customDateTimeFormat"
              :value-format="customDateTimeFormat"
              v-model="searchData.enter_timeStart"
              type="datetime"
              placeholder="请选择"
              style="width: 100%"
            />
          </el-col>
          <el-col :span="2" class="text-center">
            <span class="text-gray-500">-</span>
          </el-col>
          <el-col :span="11">
            <el-date-picker
              :format="customDateTimeFormat"
              :value-format="customDateTimeFormat"
              v-model="searchData.enter_timeEnd"
              type="datetime"
              placeholder="请选择"
              style="width: 100%"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="到期日" v-if="States">
          <el-col :span="11">
            <el-date-picker
              :format="customDateFormat"
              :value-format="customDateFormat"
              v-model="searchData.expirationDateStart"
              type="date"
              placeholder="请选择"
              style="width: 100%"
            />
          </el-col>
          <el-col :span="2" class="text-center">
            <span class="text-gray-500">-</span>
          </el-col>
          <el-col :span="11">
            <el-date-picker
              :format="customDateFormat"
              :value-format="customDateFormat"
              v-model="searchData.expirationDateEnd"
              type="date"
              placeholder="请选择"
              style="width: 100%"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="识别日期" v-if="States">
          <el-col :span="11">
            <el-date-picker
              :format="customDateFormat"
              :value-format="customDateFormat"
              v-model="searchData.date1"
              type="date"
              placeholder="请选择"
              style="width: 100%"
            />
          </el-col>
          <el-col :span="2" class="text-center">
            <span class="text-gray-500">-</span>
          </el-col>
          <el-col :span="11">
            <el-date-picker
              :format="customDateFormat"
              :value-format="customDateFormat"
              v-model="searchData.date2"
              type="date"
              placeholder="请选择"
              style="width: 100%"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="是否开票" prop="invoicing_type" v-if="States">
          <el-select v-model="searchData.invoicing_type" placeholder="请选择" clearable>
            <el-option
              v-for="item in invoicingList"
              :key="item.data_value"
              :label="item.data_name"
              :value="item.data_value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="先款先票" prop="check_type" v-if="States">
          <el-select v-model="searchData.check_type" placeholder="请选择" clearable>
            <el-option
              v-for="item in checkList"
              :key="item.data_value"
              :label="item.data_name"
              :value="item.data_value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
          <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
          <el-button @click="closes">{{ States ? "收起" : "展开" }}</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card v-loading="loading" shadow="hover" class="search-wrapper">
      <div style="margin-bottom: 20px">
        <el-row>
          <el-col :span="20">
            <div style="height: 20px; display: flex; align-items: center">
              <el-icon v-if="countBool" style="margin-right: 10px">
                <Warning />
              </el-icon>
              <span v-if="countBool">
                共<span style="color: red">{{ selectedCountData.count }}</span
                >张票据
              </span>
              <span v-if="countBool">
                ，票面总金额<span style="color: red">{{ selectedCountData.amount }}</span
                >万元
              </span>
              <span v-if="countBool">
                ，实付金额<span style="color: red">{{ selectedCountData.complete }}</span
                >元
              </span>
              <span v-if="countBool">
                ，贴息费<span style="color: red">{{ selectedCountData.discount }}</span
                >元
              </span>
            </div>
          </el-col>
          <el-col :span="4">
            <div style="display: flex; justify-content: flex-end">
              <el-tooltip content="导出">
                <el-button type="primary" :icon="Download" circle @click="getBillExport2" />
              </el-tooltip>
              <el-tooltip content="复制">
                <el-button type="primary" :icon="DocumentCopy" circle @click="copyToClipboard2" />
              </el-tooltip>
              <el-tooltip content="截图">
                <el-button type="primary" :icon="DocumentCopy" circle @click="allLists" />
              </el-tooltip>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-card v-loading="loading" shadow="never">
      <div class="toolbar-wrapper">
        <div>
          <el-button type="primary" :icon="Tickets" @click="handBatchDialog">批量出库</el-button>
          <el-button type="primary" :icon="Tickets" @click="handBatchDialog2">出库</el-button>
          <el-button type="primary" :icon="Tickets" @click="handleUpload">导入</el-button>
          <el-button type="primary" :icon="Tickets" @click="handleImageRecognition">识别</el-button>
        </div>
        <div>
          <el-tooltip content="下载">
            <el-button type="primary" :icon="Download" circle @click="getBillExport" />
          </el-tooltip>
          <el-tooltip content="刷新当前页">
            <el-button type="primary" :icon="RefreshRight" circle @click="getTableData" />
          </el-tooltip>
        </div>
      </div>
      <div class="table-wrapper">
        <el-table
          :data="tableData"
          :header-cell-style="{
            background: '#ecf4f9 !important',
            color: '#32617d !important',
            border: '1px solid #cccccc'
          }"
          class="ones"
          :row-style="rowStyle"
          :cell-style="modality"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column prop="billNo" label="票号" width="100" align="center">
            <template #default="scope">
              <div class="billNO" v-if="scope.row.is_repeat == 2">
                <el-popover placement="top" :width="200" trigger="hover" :content="scope.row.remark">
                  <template #reference>
                    <span style="margin-left: 10px; cursor: pointer" @click="copyToClipboard(scope.row.billNo)">{{
                      scope.row.billNo
                    }}</span>
                  </template>
                </el-popover>
              </div>
              <div class="billNO2" v-else>
                <el-popover placement="top" :width="200" trigger="hover" :content="scope.row.remark">
                  <template #reference>
                    <span style="margin-left: 10px; cursor: pointer" @click="copyToClipboard(scope.row.billNo)">{{
                      scope.row.billNo
                    }}</span>
                  </template>
                </el-popover>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="acceptorName" label="承兑人" align="center">
            <template #default="{ row }">
              <div>
                <!-- <span class="face" @click="faceShow(scope.row)"> {{ scope.row.acceptorName }} </span> -->
                <span class="face" @click="faceShow(row)">
                  <div class="face-title">{{ row.acceptorName }}</div>
                  <div class="face-item" v-if="row.bankName != null && row.third_party_user_id != null">
                    <img style="width: 30px; height: 30px" v-if="row.bankName != null" :src="imgsList[row.bankName]" />
                    <el-tag v-if="row.third_party_user_id != null">{{ formatIds(row.third_party_user_id) }}</el-tag>
                  </div>
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="billAmount" width="180" label="票面金额(万元)" align="center">
            <template #default="{ row }">
              <div @click="onsplitshistory(row)">{{ row.billAmount }} / {{ row.billAmount_old }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="expirationDate" width="100" label="到期日期" align="center" />
          <el-table-column prop="bill_back_user" label="背书人" align="center">
            <template #default="scope">
              <div style="display: flex; align-items: center; justify-content: center">
                <el-tag v-if="scope.row.enter_invoicings == 1" style="margin-right: 10px">开票</el-tag>
                <el-tag v-if="scope.row.enter_checks == 1" style="margin-right: 10px">先款先票</el-tag>
                {{ scope.row.bill_back_user }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="入库" align="center">
            <el-table-column prop="enter_time" width="100" label="时间" align="center" />
            <el-table-column prop="enter_price" label="每十万价格" align="center" width="100" />
            <el-table-column prop="enter_discount" label="贴息费" align="center" width="100" />
            <el-table-column prop="enter_finally" label="最终价格" align="center" width="100" />
          </el-table-column>
          <el-table-column prop="enter_nickname" width="100" label="业务员" align="center" />
          <el-table-column fixed="right" label="操作" width="280" align="center">
            <template #default="scope">
              <el-button type="primary" text bg size="small" @click="onDrawer(scope.row)">出库</el-button>
              <el-button type="primary" text bg size="small" @click="onSplits(scope.row)">拆分</el-button>
              <el-button type="danger" text bg size="small" @click="handleDelete(scope.row)">删除</el-button>
              <el-button type="danger" text bg size="small" @click="handleDeleteById(scope.row)">直接删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pager-wrapper">
        <el-pagination
          background
          :layout="paginationData.layout"
          :page-sizes="paginationData.pageSizes"
          :total="paginationData.total"
          :page-size="paginationData.pageSize"
          :currentPage="paginationData.currentPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <!-- 新增/修改 -->
    <el-dialog
      v-model="dialogVisible"
      :title="currentUpdateId === undefined ? '新增用户' : '修改用户'"
      @close="resetForm"
      width="30%"
    >
      <!--      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" label-position="left">-->
      <!--        <el-form-item prop="username" label="用户名">-->
      <!--          <el-input v-model="formData.username" placeholder="请输入" />-->
      <!--        </el-form-item>-->
      <!--        <el-form-item prop="password" label="密码" v-if="currentUpdateId === undefined">-->
      <!--          <el-input v-model="formData.password" placeholder="请输入" />-->
      <!--        </el-form-item>-->
      <!--      </el-form>-->
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleCreate">确认</el-button>
      </template>
    </el-dialog>
    <drawer ref="drawerRef" @dialog-close="handleSearch" />
    <excrete ref="excreteRef" />
    <splits ref="splitsRef" @dialog-close="handleSearch" />
    <batch ref="batchRef" @batch-close="handleSearch" />
    <UploadDialog ref="UploadDialogRef" @upload-close="handleUploadAdd" />
    <Create ref="createRef" @create-close="handleSearch" />
    <AllList ref="AllListRef" @all-list-close="handleSearch" />
    <billTransfer ref="billTransferRef" @transfer-close="handleSearch" />
    <face ref="faceRef" />
    <splitshistory ref="splitshistoryRef" />
    <ImageRecognitionUploaderSell ref="imageRecognitionUploaderSellRef" @upload-close="handleSearch" />
  </div>
</template>

<style lang="scss" scoped>
.ones {
  background: #f4f8fb;
  border: 1px solid #cccccc;
}

.search-wrapper {
  margin-bottom: 20px;

  :deep(.el-card__body) {
    padding-bottom: 2px;
  }
}

.toolbar-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.table-wrapper {
  margin-bottom: 20px;
}

.pager-wrapper {
  display: flex;
  justify-content: flex-end;
}

.billNO {
  display: flex;
  align-items: center;
  color: #2e90f7;
}
.billNO2 {
  display: flex;
  align-items: center;
}
.face {
  cursor: pointer;
  display: flex;
  align-items: center;
  color: #2e90f7;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  img {
    margin: 10px;
  }
  .face-title {
    display: flex;
    align-items: center;
    color: #2e90f7;
    justify-content: center;
    flex-wrap: wrap;
    width: 80%;
  }
  .face-item {
    display: flex;
    align-items: center;
    color: #2e90f7;
    justify-content: center;
    width: 20%;
  }
}
</style>
